<template>
  <van-nav-bar
    title="会员码"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
    fixed
  />
  <div class="membercode-wrap">
    <div class="code-wrap">
      <div class="text">
        <p>请向商家出示二维码</p>
      </div>
      <div class="barcode">
        <VueBarcode :value="value" />
      </div>
      <div class="qrcode">
        <QrcodeVue :value="payUrl" :size="qrcodesize" level="H" />
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import VueBarcode from "vue3-barcode";
import QrcodeVue from "qrcode.vue";
export default {
  setup() {
    const state = reactive({
      value: 156456415615656465,
      payUrl: "吴雅玲小仙女",
      qrcodesize: 192,
    });
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
      ...toRefs(state),
    };
  },
  components: {
    VueBarcode,
    QrcodeVue,
  },
};
</script>

<style lang="less" scoped>
.membercode-wrap {
  background-color: #f6ca8a;
  height: 590px;
  padding-top: 50px;
  .code-wrap {
    margin: 46px 10px 200px 10px;
    border: 1px solid #f6ca8a;
    background: #fff;
    border-radius: 10px;
    .text {
      background: #fceedc;
      border-radius: 10px 10px 0 0;
      p {
        text-align: center;
        margin: 0;
        padding: 10px;
      }
    }
    .barcode {
      text-align: center;
      margin-top: 10px;
    }
    .qrcode {
      text-align: center;
      margin: 10px 0 20px 0;
    }
  }
}
</style>